<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>收集表单数据</title>
</head>
<body>
<!--
   HTML表单元素大致可以分成两种类型
    1.用户输入类型，text,password,textarea  这种类型的由于用户输入的值就是value，所以搜集表单的内容直接使用v-model就行
    2.用户选择类型，radio,checkbox,select   这种类型的由于用户只能选择而无法输入，所以必须要为某种点击的类型指定value后才能绑定v-model


-->

  <div id="root">
     男： <input type="radio" v-model="gender" value="男" name="gender">
     女： <input type="radio" v-model="gender" value="女" name="gender">
      <br>
      打游戏 <input type="checkbox"  value="打游戏" v-model="hobby">
      看书 <input type="checkbox"  value="看书"  v-model="hobby">
      看电影 <input type="checkbox"  value="看电影"  v-model="hobby">
  </div>


<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
         gender: '',
         hobby:[]
        }
    })


</script>
</body>
</html>